<template>
  <div class="approval-container">
    <div>
      <p-radio-group v-model="form.approveStatus" class="radio-container">
        <span class="agree mr-15 poros-table-header-required">
          {{ approve }}
        </span>
        <!-- prettier-ignore -->
        <p-radio :value="true">
          同意
        </p-radio>
        <div
          v-show="form.approveStatus"
          style="display: flex; margin: 0, 10px;"
        >
          <span class="agree mr-15 poros-table-header-required">
            {{ apponit }}
          </span>
          <SelectSearchPeople
            style="width: 15vw; margin-right: 10px;"
            :value="form.handleUser"
            value-key="handleUser"
            @change="hadlePMChange"
          />
        </div>
        <!-- prettier-ignore -->
        <p-radio :value="false">
          驳回
        </p-radio>
      </p-radio-group>
    </div>
    <div style="margin-bottom: 10px">
      <p-form-model ref="form" :rules="pmShow || rulesComputed" :model="form">
        <p-form-model-item :label="label" prop="approveOpinion">
          <p-textarea v-model="form.approveOpinion" class="textarea" />
        </p-form-model-item>
      </p-form-model>
    </div>
    <div>
      <span class="mr-15" style="float: left"> 抄送人员 </span>
      <SelectSearchPeople
        style="width: 73vw"
        :value="form.makeCopy"
        value-key="email"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    disabledRefuse: {
      type: Boolean,
      default: false,
    },
    approve: {
      type: String,
      default: '审批结论',
    },
    label: {
      type: String,
      default: '审批意见',
    },
    apponit: {
      type: String,
      default: '指派PM',
    },
  },
  data() {
    return {
      pmShow: true,
      form: {
        approveStatus: '',
        approveOpinion: '',
        makeCopy: [],
        handleUser: [],
        handleUserId: '',
        handleUserName: '',
      },
      rulesComputed: {
        approveOpinion: [
          { max: 255, message: '输入的内容过长', trigger: 'blur' },
        ],
      },
    };
  },
  watch: {
    'form.approveStatus': {
      handler(val) {
        this.$refs.form.clearValidate();
        this.pmShow = val;
      },
    },
  },
  methods: {
    handleChange(val) {
      this.form.makeCopy = val;
    },
    hadlePMChange(val) {
      this.form.handleUser = val;
      this.form.handleUserId = val[0][0];
      this.form.handleUserName = val[0][1];
    },
  },
};
</script>

<style lang="less" scoped>
.approval-container {
  margin-bottom: 20px;
  padding-left: 40px;
  .agree {
    margin-left: -12px;
  }
}
.textarea {
  height: 90px !important;
  width: 73vw;
  resize: none;
}
/deep/ textarea.poros-input {
  max-width: 80vw;
}
/deep/ .poros-form-item {
  display: flex;
}
.radio-container {
  display: flex;
  margin-bottom: 10px;
}
</style>
